<template>
  <div class="page newEnergy">
    <sysHeader :active="'3'"></sysHeader>
     <sysMap
      :markers="markers"
      :lines="[]"
      :points="[]"
      ref="sysMap"
      @changeCenter="changeCenter"
    ></sysMap>
    <div class="newEnergy_l" :class="moveFlag?'goleft':'backleft'">
      <div class="newEnergy_l_t">
        <div class="newEnergy_l_t_box">
          <el-row>
            <el-col :span="8" style="cursor:pointer" @click.native="clickTitle(1)">
              <div class="newEnergy_l_t_item">
                <div class="newEnergy_l_t_name">实时充电桩使用</div>
                <div class="newEnergy_l_t_num">
                  <DigitRoll :rollDigits="tongji.sscdzsy"></DigitRoll>
                </div>
              </div>
            </el-col>
            <el-col :span="8" style="cursor:pointer" @click.native="clickTitle(2)">
              <div class="newEnergy_l_t_item">
                <div class="newEnergy_l_t_name">充电桩数量</div>
                <div class="newEnergy_l_t_num">
                  <DigitRoll :rollDigits="tongji.cdzsl"></DigitRoll>
                </div>
              </div>
            </el-col>
            <el-col :span="8" style="cursor:pointer" @click.native="clickTitle(3)">
              <div class="newEnergy_l_t_item">
                <div class="newEnergy_l_t_name">新能源汽车数量</div>
                <div class="newEnergy_l_t_num">
                  <DigitRoll :rollDigits="tongji.xnyqcsl"></DigitRoll>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="newEnergy_l_c">
        <div class="newEnergy_l_c_header">新能源配比</div>
        <div class="newEnergy_l_c_body">
          <sysChart :options="leftCenterOptions" :echart_height="'260px'"></sysChart>
        </div>
      </div>
      <div class="newEnergy_l_b">
        <div class="newEnergy_c_b_header">各城区充电桩类型数量</div>
      <div class="newEnergy_c_b_body">
        <div class="newEnergy_c_"></div>
        <div class="newEnergy_c_b_chart"  @mouseover="chartChangeFlag=false"
        @mouseleave="chartChangeFlag=true">
          <sysChart
            @getCityArea="getCityArea"
            :options="centerBottomOptions"
            :echart_height="'330px'"
          ></sysChart>
        </div>
      </div>
      </div>
    </div>
    <div class="newEnergy_c_l">
      <div class="common_head">
        <div class="common_item active" style="cursor: pointer;">
          <div class="common_item_bg_l"></div>
          <div class="common_item_bg_c"></div>
          <div class="common_item_bg_r"></div>
          <div class="common_item_title" style="padding-left:29px">充电桩厂家</div>
        </div>
        <div class="common_head_bg"></div>
        <div class="common_head_bg_r"></div>
      </div>
      <div class="newEnergy_c_l_body">
        <div class="newEnergy_c_l_tb_h"></div>
        <div class="newEnergy_c_l_tb_b"></div>
        <div class="common_table_head">
          <el-row>
            <el-col :span="14">
              <div class="common_cell">厂家名称</div>
            </el-col>
            <el-col :span="10">
              <div class="common_cell">充电桩数量</div>
            </el-col>
          </el-row>
        </div>
        <div class="common_table_body" style="color:#fff;">
          <vue-seamless-scroll :data="tableData" class="seamless-warp" :class-option="classOption">
            <div class="common_row" v-for="(item,index) in tableData" :key="index">
              <el-row>
                <el-col :span="14">
                  <div class="common_cell">{{item.merchant_name}}</div>
                </el-col>
                <el-col :span="10">
                  <div class="common_cell">{{item.num}}</div>
                </el-col>
              </el-row>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <div class="newEnergy_c_r">
      <div class="newEnergy_c_r_header" @click="clickTitle(5)">设备概况</div>
      <div class="newEnergy_c_r_body">
        <div class="newEnergy_c_r_t">
          <sysChart :options="centerTopOptions" :echart_height="'230px'"></sysChart>
        </div>
      </div>
    </div>
    <!-- <div class="newEnergy_r_t">
      <div class="newEnergy_r_t_header">充电桩类型</div>
      <div class="newEnergy_r_t_body">
        <sysChart :options="rightTopOptions" :echart_height="'400px'"></sysChart>
      </div>
    </div> -->
    <div class="newEnergy_r_b">
      <div class="newEnergy_r_b_header">充电桩热点区域top5</div>
      <div class="newEnergy_r_b_body">
        <div class="newEnergy_r_b_tb_h"></div>
        <div class="newEnergy_r_b_tb_b"></div>
        <div class="common_table_head">
          <el-row>
            <el-col :span="8">
              <div class="common_cell">区名</div>
            </el-col>
            <el-col :span="8">
              <div class="common_cell">街道名称</div>
            </el-col>
            <el-col :span="8">
              <div class="common_cell">充电指数</div>
            </el-col>
          </el-row>
        </div>
        <div class="common_table_body" style="color:#fff;">
          <!--                    <vue-seamless-scroll :data="tableData1" class="seamless-warp" :class-option="classOption">-->
          <div class="common_row" v-for="(item,index) in tableData1" :key="index">
            <el-row>
              <el-col :span="8">
                <div class="common_cell">{{item.region_name}}</div>
              </el-col>
              <el-col :span="8">
                <div class="common_cell">{{item.hotspot_name}}</div>
              </el-col>
              <el-col :span="8">
                <div class="common_cell">{{item.used_rate}}</div>
              </el-col>
            </el-row>
          </div>
          <!--                    </vue-seamless-scroll>-->
        </div>
      </div>
    </div>
    <!-- 左侧弹框 -->
    <div class="left_model" :class="moveFlag?'leftmodelgo':'leftmodelback'">
      <div class="left_model_title">
        <span>{{model_title}}</span>
        <el-button
          @click="moveFlag=!moveFlag"
          class="model_close"
          type="primary"
          icon="el-icon-back"
          circle
        ></el-button>
      </div>
      <div class="model_content" v-if="clickTitleNum==1">
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">充电桩</div>
          <div class="model_title_item" style="color:#FF6F6F;">所属充电站</div>
          <div class="model_title_item" style="color:#F7B500;">类型</div>
        </div>
        <ul class="model_list" v-if="chargingList.length>0">
          <li class="model_list_item" v-for="(item,index) in chargingList" :key="index">
            <span style="color:#81FF5D;">{{item.equipmentName}}</span>
            <span style="color:#FF6F6F;">{{item.stationName}}</span>
            <span style="color:#F7B500;">{{item.equipmentType | formatEquipmentType }}</span>
          </li>
        </ul>
        <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==2">
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">充电桩</div>
          <div class="model_title_item" style="color:#FF6F6F;">所属充电站</div>
          <div class="model_title_item" style="color:#F7B500;">类型</div>
        </div>
        <ul class="model_list" v-if="chargingList.length>0">
          <li class="model_list_item" v-for="(item,index) in chargingList" :key="index">
            <span style="color:#81FF5D;">{{item.equipmentName}}</span>
            <span style="color:#FF6F6F;">{{item.stationName}}</span>
            <span style="color:#F7B500;">{{item.equipmentType | formatEquipmentType }}</span>
          </li>
        </ul>
        <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==3">
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">车牌号</div>
          <div class="model_title_item" style="color:#FF6F6F;">颜色</div>
          <div class="model_title_item" style="color:#F7B500;">厂家</div>
        </div>
        <ul class="model_list" v-if="newEnergyCarList.length>0">
          <li class="model_list_item" v-for="(item,index) in newEnergyCarList" :key="index">
            <span style="color:#81FF5D;">{{item.carNumber}}</span>
            <span style="color:#FF6F6F;">{{item.color}}</span>
            <span style="color:#F7B500;">{{item.factoryName}}</span>
          </li>
        </ul>
        <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==4">
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">充电桩</div>
          <div class="model_title_item" style="color:#FF6F6F;">充电站</div>
          <div class="model_title_item" style="color:#F7B500;">所属辖区</div>
        </div>
        <ul class="model_list"  v-if="areaChargingList.length>0" >
          <li class="model_list_item" v-for="(item,index) in areaChargingList" :key="index">
            <span style="color:#81FF5D;">{{item.equipmentName}}</span>
            <span style="color:#FF6F6F;">{{item.stationName}}</span>
            <span style="color:#F7B500;">{{item.areaName}}</span>
          </li>
        </ul>
        <!-- <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div> -->
      </div>
      <div class="model_content" v-if="clickTitleNum==5">
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">设备名称</div>
          <div class="model_title_item" style="color:#FF6F6F;">设备状态</div>
          <div class="model_title_item" style="color:#F7B500;">设备类型</div>
        </div>
        <ul class="model_list" v-if="deviceList.length>0">
          <li class="model_list_item" v-for="(item,index) in deviceList" :key="index">
            <span style="color:#81FF5D;">{{item.deviceName}}</span>
            <span style="color:#FF6F6F;">{{item.deviceStatus | formatDeviceStatus}}</span>
            <span style="color:#F7B500;">{{item.deviceType | formatDeviceType }}</span>
          </li>
        </ul>
        <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
      <div class="model_content" v-if="clickTitleNum==6">
        <div class="model_title">
          <div class="model_title_item" style="color:#81FF5D;">工单号</div>
          <div class="model_title_item" style="color:#FF6F6F;">维修工</div>
          <div class="model_title_item" style="color:#F7B500;">工单分类</div>
          <div class="model_title_item" style="color:#F7B500;">处理状态</div>
        </div>
        <ul class="model_list" v-if="maintenanceList.length>0">
          <li class="model_list_item" v-for="(item,index) in maintenanceList" :key="index">
            <span style="color:#81FF5D;">{{item.orderNO}}</span>
            <span style="color:#FF6F6F;">{{item.userName}}</span>
            <span style="color:#F7B500;">{{item.orderType | formatOrderType }}</span>
            <span style="color:#F7B500;">{{item.orderStatus | formatOrderStatus }}</span>
          </li>
        </ul>
        <div v-else class="no_data" >
          <img class="no_data_img" :src="require('../../assets/images/no_data.png')" alt="">
          <span>暂无数据</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sysHeader from "@/components/common/sysHeader.vue";
import sysChart from "@/components/common/sysChart.vue";
import sysMap from "@/components/common/sysMap.vue";
import DigitRoll from "@huoyu/vue-digitroll";
import config from "@/api/config.js";
import util from "@/utils/util.js";
import vueSeamlessScroll from "vue-seamless-scroll";
import axios from "axios";
export default {
  name: "newEnergy",
  data() {
    return {
      moveFlag: false, //是否展示
      chartChangeFlag: false,
      chartPosition: 0,
      clickTitleNum: 0, //点击数字
      markers: [],
      model_title: "", //弹框标题
      chargingList: [], //充电桩数量
      newEnergyCarList: [], //新能源汽车数量
      areaChargingList: [], //区域内充电桩数量
      deviceList: [], //设备列表
      maintenanceList: [], //运维工单列表
      tableData: [],
      tableData1: [],
      leftInterval: undefined,
      rightInterval: undefined,
      tongji: {
        sscdzsy: 0,
        cdzsl: 0,
        xnyqcsl: 0,
      },
      leftBottomOptions: {
        tooltip: {
          color: "#fff",
          trigger: "axis",
          formatter: "{a}<br/>{c}kw/h",
        },
        grid: {
          left: 60,
          top: 40,
          bottom: 40,
          right: 40,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "bold",
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          axisTick: { show: false },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "bold",
          },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        series: [
          {
            name: "充电用量数据",
            symbol: "circle",
            itemStyle: {
              color: "#fff",
            },
            itemWidth: 40,
            lineStyle: {
              color: "#0091FF",
            },
            data: [
              [1, 1],
              [2, 1],
              [3, 1],
              [4, 1],
              [5, 1],
              [6, 1],
              [7, 1],
            ],
            type: "line",
          },
        ],
      },
      leftCenterOptions: {
        tooltip: {
          color: "#fff",
          trigger: "axis",
          formatter: "{a0}<br/>{c0}辆<br/>{a1}<br/>{c1}个",
        },
        legend: {
          top: "bottom",
          icon: "rect",
          itemWidth: 10,
          textStyle: {
            color: "#ffffff",
            fontSize: 14,
            fontWeight: "bold",
          },
          itemHeight: 10,
          data: ["新能源车", "充电桩"],
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
            },
          },
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            color: "#32FFB4",
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        grid: {
          top: 40,
          left: "15%",
          right: "5%",
          bottom: 40,
        },
        series: [
          {
            name: "新能源车",
            type: "line",
            symbol: "none",
            smooth: true,
            itemStyle: {
              color: "#70FFE7",
            },
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(112,255,231,1)",
                },
                {
                  offset: 1,
                  color: "rgba(112,255,231,0.2)",
                },
              ]),
            },
            data: [],
          },
          {
            name: "充电桩",
            type: "line",
            smooth: true,
            symbol: "none",
            itemStyle: {
              color: "rgba(255,148,77,1)",
            },
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(255,148,77,1)",
                },
                {
                  offset: 1,
                  color: "rgba(255,148,77,0.2)",
                },
              ]),
            },
            data: [],
          },
        ],
      },
      centerTopOptions: {
        grid: {
          left: "40",
          right: "40",
          bottom: "20",
          top: "20",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        yAxis: {
          type: "category",
          axisLabel: {
            color: "#32FFB4",
            fontSize: 14,
            fontWeight: "bold",
          },
          axisTick: {
            show: false,
          },
          axisLine: { show: false },
          splitLine: { show: false },
          data: ["离线（个）", "故障（个）", "在线（个）", "总数（个）"],
        },
        series: [
          {
            // For shadow
            type: "bar",
            itemStyle: {
              color: "rgba(27,158,234,0.2)",
            },
            barGap: "-100%",
            barCategoryGap: "40%",
            data: [
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
              {
                value: 1000,
              },
            ],
            animation: false,
          },
          {
            name: "",
            label: {
              show: true,
              position: "right",
              textStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "bold",
              },
            },
            type: "bar",
            data: [
              {
                value: 0,
                itemStyle: {
                  color: "#9CAEBA",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#F36C6C",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#5AD8A6",
                },
              },
              {
                value: 0,
                itemStyle: {
                  color: "#0091FF",
                },
              },
            ],
          },
        ],
      },
      centerCenterOptions1: {
        title: {
          text: 0,
          x: "center",
          top: 30,
          textStyle: {
            fontSize: 16,
            fontWeight: "bold",
            color: "#fff",
          },
        },
        color: ["rgba(255,255,255,0)", "#F16A3C", "rgba(27,85,136,0.4)"],
        series: [
          {
            name: "未分配",
            type: "pie",
            radius: ["50%", "80%"],
            startAngle: 315,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 25, name: "" },
              {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "bold",
                },
                value: 0,
                name: "未分配",
              },
              { value: 75, name: "" },
            ],
          },
        ],
      },
      centerCenterOptions2: {
        title: {
          text: 0,
          x: "center",
          top: 30,
          textStyle: {
            fontSize: 16,
            fontWeight: "bold",
            color: "#fff",
          },
        },
        color: ["rgba(255,255,255,0)", "#F3FF99", "rgba(27,85,136,0.4)"],
        series: [
          {
            name: "未受理",
            type: "pie",
            radius: ["50%", "80%"],
            startAngle: 315,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 25, name: "" },
              {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "bold",
                },
                value: 0,
                name: "未受理",
              },
              { value: 75, name: "" },
            ],
          },
        ],
      },
      centerCenterOptions3: {
        title: {
          text: 0,
          x: "center",
          top: 30,
          textStyle: {
            fontSize: 16,
            fontWeight: "bold",
            color: "#fff",
          },
        },
        color: ["rgba(255,255,255,0)", "#28BAE2", "rgba(27,85,136,0.4)"],
        series: [
          {
            name: "处理中",
            type: "pie",
            radius: ["50%", "80%"],
            startAngle: 315,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 25, name: "" },
              {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "bold",
                },
                value: 0,
                name: "处理中",
              },
              { value: 75, name: "" },
            ],
          },
        ],
      },
      centerCenterOptions4: {
        title: {
          text: 0,
          x: "center",
          top: 30,
          textStyle: {
            fontSize: 16,
            fontWeight: "bold",
            color: "#fff",
          },
        },
        color: ["rgba(255,255,255,0)", "#5AFF52", "rgba(27,85,136,0.4)"],
        series: [
          {
            name: "已处理",
            type: "pie",
            radius: ["50%", "80%"],
            startAngle: 315,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 25, name: "" },
              {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "bold",
                },
                value: 0,
                name: "已处理",
              },
              { value: 75, name: "" },
            ],
          },
        ],
      },
      centerBottomOptions: {
        tooltip: {
          trigger: "axis",
          // formatter(params) {
          //     return params[0].name+'<br/>'
          //         +params[0].marker+' '+ params[0].seriesName+'：'+params[0].data[1]+'<br/>'
          //         +params[1].marker+' '+ params[1].seriesName+'：'+params[1].data[1]+'<br/>'
          //         +params[2].marker+' '+ params[2].seriesName+'：'+params[2].data[1]
          // }
        },
        dataZoom: {
          textStyle: {
            color: "rgba(255,255,255,0.5)",
          },
          type: "inside",
          start: "45",
          end: "66",
        },
        legend: {
          right: 30,
          bottom: 0,
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "bold",
          },
          data: ["直流电", "交流电", "交直流一体"],
        },
        grid: {
          top: 60,
          left: 60,
          right: 60,
          bottom: 60,
        },
        xAxis: [
          {
            type: "category",
            triggerEvent: true,
            axisLabel: {
              color: "#BFE8FF",
              fontSize: 14,
              fontWeight: "bold",
              lineHeight: 25,
            },
            axisTick: { show: false },
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "#32FFB4",
              fontSize: 14,
              fontWeight: "bold",
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.4)",
              },
            },
            // max: 500,
            // splitNumber: 5,
            axisTick: { show: false },
            axisLine: {
              show: false,
            },
          },
          {
            type: "log",
            axisLine: {
              show: true,
            },
          },
        ],
        color: ["#42E0FC", "#8052FF", "#4e7dda"],
        silent: true,
        series: [
          {
            name: "直流电",
            type: "bar",
            barWidth: "25%",
            data: [],
            itemStyle: {
              normal: {
                     barBorderRadius: [15,15,0,0],
                },
            }
          },
          {
            // yAxisIndex: 1,
            name: "交流电",
            type: "bar",
            barWidth: "25%",
            itemStyle: {
              normal: {
                     barBorderRadius: [15,15,0,0],
                },
            },
            data: [],
          },
          {
            name: "交直流一体",
            type: "bar",
            barWidth: "25%",
            itemStyle: {
              normal: {
                     barBorderRadius: [10,10,0,0],
                },
            },
            data: [],
          },
          {
            name: "占比",
            type: "line",
            lineStyle: {
              color: "#B960FF",
            },
            itemStyle: {
              color: "#B960FF",
            },
            yAxisIndex: 1,
            data: [30,60,78,90,45,85,100,65,78,98,],
          },
        ],
      },
      rightTopOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "bold",
            lineHeight: 40,
          },
          padding: [0, 40],
          left: "center",
          bottom: "60",
          data: ["直流电", "交流电", "交直流一体桩", "换电站"],
        },
        color: ["#42E0FC", "#FFA4A4", "#5B8FF9", "#BA4EA0"],
        series: [
          {
            name: "充电桩类型",
            clockwise: false,
            type: "pie",
            center: ["50%", "35%"],
            radius: ["35%", "55%"],
            label: {
              show: true,
              color: "#fff",
              fontSize: 14,
              fontWeight: "bold",
              formatter: "{d}%",
            },
            labelLine: {
              length: 10,
              length2: 10,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            data: [
              { value: 335, name: "直流电" },
              { value: 310, name: "交流电" },
              { value: 234, name: "交直流一体桩" },
              { value: 135, name: "换电站" },
            ],
          },
        ],
      },
    };
  },
  watch:{
    chartPosition(v) {
      const start = v;
      const startMap = {
        0: 0,
        30: 35,
        70: 70,
      };
      const endMap = {
        0: 30,
        30: 66,
        70: 100,
      };
      this.centerBottomOptions.dataZoom.start = startMap[start];
      this.centerBottomOptions.dataZoom.end = endMap[start];
    },
  },
  components: {
    sysHeader,
    sysChart,
    sysMap,
    DigitRoll,
    vueSeamlessScroll,
  },
  filters: {
    formatEquipmentType(value) {
      if (value == 1) {
        return "直流设备";
      } else if (value == 2) {
        return "交流设备";
      }
    },
    formatDeviceStatus(val) {
      if (val == 0) {
        return "禁用";
      } else if (val == 1) {
        return "启用";
      } else if (val == 2) {
        return "激活";
      }
    },
    formatDeviceType(val) {
      if (val == 0) {
        return "NS中间件";
      } else if (val == 1) {
        return "机器人";
      } else if (val == 2) {
        return "应用中间件";
      } else if (val == 4) {
        return "监控中间件";
      }
    },
    formatOrderStatus(val) {
      if (val == 1) {
        return "未分配";
      } else if (val == 2) {
        return "未受理";
      } else if (val == 3) {
        return "处理中";
      } else if (val == 4) {
        return "已处理";
      }
    },
    formatOrderType(val){
        if (val == 1) {
            return "维修";
        } else if (val == 2) {
            return "断电";
        } else if (val == 3) {
            return "断网";
        } else if (val == 4) {
            return "设备异常";
        }
    }
  },
  computed: {
    classOption() {
      return util.classOption;
    },
  },
  created() {
    //获取充电桩数量
    this.getChargingList();
    //获取新能源汽车数量
    this.getNewEnergyCarList();
    //获取设备列表
    this.getDeviceList();
    //获取运维工单列表
    this.getMaintenanceList();
  },
  mounted() {
    this.getLeftTop();
    this.getLeftCenter();
    this.getLeftBottom();
    this.getCenterLeft();
    this.getCenterRightTop();
    this.getCenterRightCenter();
    this.getCenterBottom();
    this.getRightTop();
    this.getRightBottom();
  },
  methods: {
    //地图改变
    changeCenter({ zoom, location }) {
      /*
                if(zoom >= 12) {
                    console.log('显示点信息')
                    this.markers = []
                    this.$nextTick(() => {
                        this.$refs.sysMap.onHideMarker()
                    })
                    this.getMarkData()
                    this.getLineData()
                } else {
                    console.log('隐藏点信息')
                    this.markers = []
                    this.lineData = []
                    this.$nextTick(() => {
                        this.$refs.sysMap.onHideMarker()
                    })
                    this.getMarkTongji()
                }*/
    },
    //获取充电桩数量
    getChargingList() {
      axios({
        method: "post",
        url: config.basePath + "park/index/getEquipmentInfoList",
        data: {
          area: "",
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          //console.log("res222", res);
          if (res.status >= 200 && res.status < 300) {
            this.chargingList = res.data.data;
          } else {
            //console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //点击柱状图那个辖区
    getCityArea(area) {
      console.log("areaaaaaaa",area)
      if (this.moveFlag == true) {
        this.moveFlag = true;
      } else {
        this.moveFlag = !this.moveFlag;
      }
      this.clickTitleNum = 4;
      this.areaChargingList = [];
      //console.log("88", area);
      this.model_title = `${area}充电桩类型`;
      axios({
        method: "post",
        url: config.basePath + "park/index/getEquipmentInfoList",
        data: {
          area,
        },
        header: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => {
          console.log("****", res);
          if (res.status >= 200 && res.status < 300) {
            this.areaChargingList = res.data.data;
          } else {
            //console.log(res.message);
          }
        })
        .catch((err) => {
          //console.log("8787", err);
        });
    },
    //设备列表数据
    getDeviceList() {
      this.$api.get(
        config.basePath + "park/index/getDeviceInfoList",
        {},
        (res) => {
          //console.log(res, "99999");
          if (res.status >= 200 && res.status < 300) {
            this.deviceList = res.data.data;
          } else {
            //console.log(res.message);
          }
        }
      );
    },
    //获取新能源汽车数量
    getNewEnergyCarList() {
      this.$api.get(
        config.basePath + "park/index/getNewEnergyCarList",
        {},
        (res) => {
          if (res.status >= 200 && res.status < 300) {
            this.newEnergyCarList = res.data.data;
          } else {
            //console.log(res.message);
          }
        }
      );
    },
    //获取运维工单列表
    getMaintenanceList() {
      this.$api.get(
        config.basePath + "park/index/getMaintenanceList ",
        {},
        (res) => {
          //console.log("7889", res);
          if (res.status >= 200 && res.status < 300) {
            this.maintenanceList = res.data.data;
          } else {
            //console.log(res.message);
          }
        }
      );
    },
    //点击栏目标题展示弹框及其对应数据
    clickTitle(num) {
      //console.log("111118888")
      this.moveFlag = !this.moveFlag;
      if (num == 1) {
        this.clickTitleNum = 1;
        this.model_title = "实时充电桩使用";
      } else if (num == 2) {
        this.clickTitleNum = 2;
        this.model_title = "充电桩数量";
      } else if (num == 3) {
        this.clickTitleNum = 3;
        this.model_title = "新能源汽车数量";
      } else if (num == 5) {
        if (this.moveFlag == true) {
          this.moveFlag = true;
        } else {
          this.moveFlag = !this.moveFlag;
        }
        this.clickTitleNum = 5;
        this.model_title = "设备概况";
      } else if (num == 6) {
        if (this.moveFlag == true) {
          this.moveFlag = true;
        } else {
          this.moveFlag = !this.moveFlag;
        }
        this.clickTitleNum = 6;
        this.model_title = "运维工单";
      }
    },
    getRightBottom() {
      this.$api.get(
        config.basePath + "park/index/getChargingHotSpot",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.tableData1 = data || [];
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    changeTable(data) {
      data.push(data[0]); //把第一条数据插入数组最有一条
      data.shift(); //删除数组中第一条数据
    },
    //左侧柱状图滚动dataZomm
    startChangeChart() {
      this.chartChangeFlag = true;
      if (this.chartChangeInterval) {
        clearInterval(this.chartChangeInterval);
      }
      this.chartChangeInterval = setInterval(() => {
        if (this.chartChangeFlag) {
          const map1 = {
            0: 30,
            30: 70,
            70: 0,
          };
          this.chartPosition = map1[this.chartPosition];
        }
      }, 2000);
    },
    playLeftTable() {
      if (this.leftInterval) {
        clearInterval(this.leftInterval);
      }
      this.leftInterval = setInterval(() => {
        this.changeTable(this.tableData);
      }, 8000); //每两秒执行一次插入删除操作
    },
    playRightTable() {
      if (this.rightInterval) {
        clearInterval(this.rightInterval);
      }
      this.rightInterval = setInterval(() => {
        this.changeTable(this.tableData1);
      }, 2000); //每两秒执行一次插入删除操作
    },
    getRightTop() {
      this.$api.get(
        config.basePath + "park/index/getChargingPileType",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            //console.log("cccc",data)
            this.rightTopOptions.legend.data = data.map((item) => item.name);
            this.rightTopOptions.series[0].data = data.map((item) => {
              return {
                name: item.name,
                value: item.rate,
              };
            });
          } else {
            // console.log(response.message);
          }
        }
      );
    },
    getCenterBottom() {
      this.$api.get(
        config.basePath + "park/index/getChargingPileNeed",
        {},
        (response) => {
          //console.log("111", response);
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            const data1 = data.map((item) => [item.area_name, item.num]);
            const data2 = data.map((item) => [item.area_name, item.need]);
            const data3 = data.map((item) => [item.area_name, item.types]);
            // const max1 = data1.sort((a,b) => b[1]-a[1])[0][1]
            // const max2 = data2.sort((a,b) => b[1]-a[1])[0][1]
            // const max3 = data3.sort((a,b) => b[1]-a[1])[0][1]
            // let max = max1 > max2 ? max1 : max2
            // let sum = 1
            // for(let i=0;i<(max+'').length;i++){
            //     sum = sum * 10
            // }
            // this.centerBottomOptions.yAxis[0].max = sum
            //console.log("data2", data2);
            this.centerBottomOptions.series[0].data = data1;
            this.centerBottomOptions.series[1].data = data2;
            this.centerBottomOptions.series[2].data = data3;
            this.startChangeChart();
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getCenterRightCenter() {
      this.$api.get(
        config.basePath + "park/index/getOperationalWorkOrder",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data[0];
            const total = parseInt(response.data.data.total_num);
            const spaceNum = total / 3;
            data.forEach((item) => {
              const num = parseInt(item.num);
              const other = total - num;
              let key = "";
              if (item.name === "未分配") {
                key = "centerCenterOptions1";
              }
              if (item.name === "未受理") {
                key = "centerCenterOptions2";
              }
              if (item.name === "处理中") {
                key = "centerCenterOptions3";
              }
              if (item.name === "已处理") {
                key = "centerCenterOptions4";
              }
              if (key) {
                this[key].title.text = num;
                this[key].series[0].data[0].value = spaceNum;
                this[key].series[0].data[1].value = num;
                this[key].series[0].data[2].value = other;
              }
            });
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getCenterRightTop() {
      this.$api.get(
        config.basePath + "park/index/getDeviceData",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            let max = 0;
            for (let key in data) {
              if (max < parseInt(data[key])) {
                max = parseInt(data[key]);
              }
            }
            max = Math.floor(max + max / 2);
            this.centerTopOptions.series[0].data[3].value = max;
            this.centerTopOptions.series[0].data[2].value = max;
            this.centerTopOptions.series[0].data[1].value = max;
            this.centerTopOptions.series[0].data[0].value = max;
            this.centerTopOptions.series[1].data[3].value = data.total_num;
            this.centerTopOptions.series[1].data[2].value = data.online_num;
            this.centerTopOptions.series[1].data[1].value = data.breakdown_num;
            this.centerTopOptions.series[1].data[0].value = data.offline_num;
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getCenterLeft() {
      this.$api.get(
        config.basePath + "park/index/getMerchantShareCarNum",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            this.tableData = [].concat(...data).concat(...data);
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftBottom() {
      this.$api.get(
        config.basePath + "park/index/getPowerConsumptionPerWeek",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            const data1 = data.map((item) => [
              item.name,
              item.power_consumption,
            ]);
            this.leftBottomOptions.series[0].data = data1;
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftCenter() {
      this.$api.get(
        config.basePath + "park/index/chargingPileRate",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            const data1 = data[0].charging_car.map((item) => [
              item.name,
              item.num,
            ]);
            const data2 = data[1].charging_pile.map((item) => [
              item.name,
              item.num,
            ]);
            this.leftCenterOptions.series[0].data = data1;
            this.leftCenterOptions.series[1].data = data2;
          } else {
            //console.log(response.message);
          }
        }
      );
    },
    getLeftTop() {
      this.$api.get(
        config.basePath + "park/index/getMixChargingInfo",
        {},
        (response) => {
          if (response.status >= 200 && response.status < 300) {
            const data = response.data.data;
            //console.log(data);
            data.forEach((item) => {
              if (item.name === "实时充电桩使用") {
                this.tongji.sscdzsy = item.charging_pile_used_num;
              }
              if (item.name === "充电桩数量") {
                this.tongji.cdzsl = item.charging_pile_num;
              }
              if (item.name === "新能源汽车数量") {
                this.tongji.xnyqcsl = item.charging_car_num;
              }
            });
          } else {
            //console.log(response.message);
          }
        }
      );
    },
  },
};
</script>
<style scoped>
.newEnergy {
  overflow: hidden;
}
/* 左侧弹窗 */
.left_model {
  width: 460px;
  height: 800px;
  position: absolute;
  left: -560px;
  top: 10%;
  padding: 0 12px;
  background-image: url("~@/assets/images/model_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: all 2s;
  z-index: 120;
}
.left_model .model_content {
  width: 100%;
  /* height: 740px; */
}
.left_model_title {
  position: relative;
  width: 100%;
  height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  text-align: center;
  /* margin-bottom: 20px; */
}
.left_model .left_model_title >>> .el-button--primary {
  background-color: #04132c;
  position: absolute;
  right: 0;
  top: 10px;
  z-index: 122;
}
.model_title {
  width: 100%;
  height: 50px;
  border: 1px solid #1c95dc;
  margin-top: 20px;
  display: flex;
}
.model_title_item {
  flex: 1;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.model_list {
  height: 660px;
  overflow-y: scroll;
}
.model_list::-webkit-scrollbar {
  display: none;
}
.model_list .model_list_item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  justify-content: space-around;
}
.model_list .model_list_item span {
  flex: 1;
  text-align: center;
}
/* 弹窗结束 */
.newEnergy_c_l_body .common_table_head {
  height: 42px;
  font-size: 18px;
  line-height: 42px;
}
.newEnergy_c_l_body .common_table_body {
  top: 42px;
}
.newEnergy_c_l_body .common_table_body .common_row {
  height: 61px;
  line-height: 61px;
}
.newEnergy_r_b .common_table_head {
  height: 62px;
  font-size: 18px;
  line-height: 62px;
}
.newEnergy_r_b .common_table_body {
  top: 61px;
}
.newEnergy_r_b .common_table_body .common_row {
  height: 65px;
  line-height: 65px;
}
.newEnergy_r_b {
  position: absolute;
  right: 12px;
  bottom: 48px;
  z-index: 100;
  width: 456px;
}
.newEnergy_r_b_header {
  height: 38px;
  line-height: 38px;
  background-image: url("~@/assets/images/newEnergy_r_c_bg.png");
  background-repeat: no-repeat;
  background-size: 456px 38px;
  background-position:0 0;
  padding-left: 94px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 38px;
}
.newEnergy_r_b_body {
  height:280px;
  width: 456px;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  background-image: url("~@/assets/images/newEnergy_r_b_bg.png");
  background-repeat: no-repeat;
  background-size: 456px 61px;
  background-position: 0 0;
}
.newEnergy_r_b_tb_b {
  position: absolute;
  top: 60px;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.newEnergy_c_l_tb_h {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 61px;
}
.newEnergy_r_t {
  position: absolute;
  right: 12px;
  top: 121px;
  width: 458px;
  height: 451px;
  z-index: 100;
  background-image: url("~@/assets/images/newEnergy_r_t_bg.png");
  background-repeat: no-repeat;
  background-size: 458px 451px;
  background-position: 0 0;
}
.newEnergy_r_t_header {
  padding-top: 18px;
  padding-left: 29px;
  padding-bottom: 20px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 24px;
}
.newEnergy_r_t_body {
  height: 254px;
}
.newEnergy_c_r_b{
    cursor: pointer;
}
.newEnergy_c_r_b_chart {
  margin: 20px 40px 0 40px;
}
.newEnergy_c_r_b_title {
  position: absolute;
  left: 16px;
  top: 8px;
  font-size: 16px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 24px;
  cursor: pointer;
}
.newEnergy_c_b {
  position: absolute;
  width: 936px;
  height: 350px;
  left: 492px;
  bottom: 48px;
  z-index: 100;
}
.newEnergy_c_b_header {
  height: 55px;
  padding-top: 16px;
  text-align: center;
  background-image: url("~@/assets/images/newEnergy_c_b_bg.png");
  background-repeat: no-repeat;
  background-size:100% 100%;

  background-position: 0 0;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  position: relative;
  z-index: 1;
}
.newEnergy_c_b_body {
  position: relative;
  margin-top: -1px;
  z-index: 2;
  height: 296px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.newEnergy_c_b_chart {
  height: 214px;
  margin-top: -40px;
}
.newEnergy_c_r {
  position: absolute;
  right: 12px;
  top: 420px;
  width: 458px;
  z-index: 100;
}
.newEnergy_c_r_header {
  height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  line-height: 40px;
  text-align: center;
  background-image: url("~@/assets/images/newEnergy_c_t_bg.png");
  background-repeat: no-repeat;
  background-size: 307px 40px;
  background-position: center 0;
  cursor: pointer;
}
.newEnergy_c_r_body {
  position: absolute;
  left: 0;
  right: 0;
  top: 39px;
}
.newEnergy_c_r_t {
  width: 552px;
  height: 230px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
  margin-bottom: 23px;
}
.newEnergy_c_r_b {
  width: 552px;
  height: 208px;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
  position: relative;
}
.newEnergy_c_l {
  position: absolute;
  right: 12px;
  top: 92px;
  width: 458px;
  z-index: 100;
}
.newEnergy_c_l_body {
  position: relative;
  clear: both;
  height: 250px;
}
.newEnergy_c_l_tb_h {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42px;
  background: linear-gradient(
    90deg,
    rgba(0, 45, 103, 1) 0%,
    rgba(5, 16, 42, 1) 100%
  );
  border: 1px solid rgba(27, 158, 234, 1);
}
.newEnergy_c_l_tb_b {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 16, 42, 0.8);
  border: 1px solid rgba(27, 158, 234, 0.8);
}
.newEnergy_l {
  position: absolute;
  /* left: 10px; */
  top: 92px;
  width: 470px;
  height: 960px;
  transition: all 2s;
  background-image: url("~@/assets/images/newEnergy_l_bg.png");
  background-repeat: no-repeat;
  background-size: 470px 960px;
  background-position: 0 0;
  z-index: 100;
}
.newEnergy_l_b {
  position: absolute;
  left: 24px;
  bottom: 26px;
  width: 437px;
  height: 328px;
  z-index: 100;
}
.newEnergy_l_b_header {
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  text-align: center;
  background-image: url("~@/assets/images/newEnergy_l_b_bg.png");
  background-repeat: no-repeat;
  background-size: 437px 40px;
  background-position: 0 0;
}
.newEnergy_l_b_body {
  width: 435px;
  height: 288px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  margin-top: -1px;
  border: 1px solid rgba(27, 158, 234, 0.6);
}
.newEnergy_l_c {
  position: absolute;
  left: 23px;
  top: 257px;
  width: 437px;
  height: 319px;
  background-image: url("~@/assets/images/newEnergy_l_c_bg.png");
  background-repeat: no-repeat;
  background-size: 437px 319px;
  background-position: 0 0;
  z-index: 100;
}
.newEnergy_l_c_header {
  height: 40px;
  line-height: 40px;
  font-size: 22px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #bfe8ff;
  padding-left: 15px;
}
.newEnergy_l_c_body {
  height: 280px;
}
.newEnergy_l_t {
  position: absolute;
  left: 9px;
  top: 26px;
  right: 9px;
  height: 200px;
}
.newEnergy_l_t_box {
  position: relative;
}
.newEnergy_l_t_item {
  position: relative;
  margin: 0 5px;
  height: 200px;
  background: linear-gradient(
    360deg,
    rgba(0, 45, 103, 0.6) 0%,
    rgba(5, 16, 42, 0.6) 100%
  );
  border: 1px solid rgba(27, 158, 234, 0.6);
}
.newEnergy_l_t_name {
  padding-top: 50px;
  padding-bottom: 10px;
  font-size: 18px;
  font-family: SourceHanSansSC-Normal, SourceHanSansSC;
  font-weight: 800;
  color: #bfe8ff;
  line-height: 18px;
  text-align: center;
}
.newEnergy_l_t_num {
  font-size: 40px;
  font-family: DINAlternate-Bold, DINAlternate;
  color: #32ffb4;
  line-height: 28px;
  font-weight: bold;
  width: 99.5%;
  margin: 0 auto;
}
.newEnergy_l_t_num .d-roll-wrapper {
  margin: 10px auto;
}
.page {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-image: url("~@/assets/images/home_bg.png");
  background-repeat: no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 0;
}
>>> .el-table,
.el-table__expanded-cell {
  background: none;
}
>>> .el-table tr:hover {
  background: none;
}
>>> .el-table td,
.el-table th.is-leaf {
  border: none;
}
>>> .el-table,
>>> .el-table * {
  border: none;
}
>>> .el-table .cell {
  line-height: 28px;
  font-size: 12px;
  color: #84d2ff;
}
.newEnergy_c_l_body >>> .el-table .el-table__body .cell {
  line-height: 47px;
}

.newEnergy_r_b_body >>> .el-table .el-table__body .cell {
  line-height: 51px;
}
.newEnergy_r_b_body >>> .el-table th > .cell {
  line-height: 61px;
}

>>> .el-table th > .cell {
  line-height: 32px;
}
>>> .el-table .el-table__body tr:nth-child(even) {
  background: rgba(50, 63, 98, 0.2);
}
</style>
<style>
.el-table tbody tr:hover > td {
  background: rgba(50, 63, 98, 0.3) !important;
}
.el-table td,
.el-table th {
  padding: 0;
}

.el-table th,
.el-table tr {
  background: none;
}
.el-table::before {
  height: 0;
}

.el-table * {
  border: none !important;
}
</style>
